<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-line-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'bar'
    }
  },

  computed: {
    option () {
      let vm = this
      let legenddata = []
      let seriesdata = []
      let maxdata = []

      if (this.data.length > 0) {
        this.data.forEach((item, index) => {
          legenddata.push(item.name)
          if (vm.multColor) {
            let ncolor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: this.colors[2 * index] },
              { offset: 1, color: this.colors[2 * index + 1] }
            ])
            seriesdata.push({
              value:item.value,
              itemStyle: {
                color: ncolor
              }
            })
          } else {
            seriesdata.push(item.value)
          }
          maxdata.push(item.max)
        })
      }
      return {
        grid: {
          show: this.showGrid,
          left: this.gridLeft === '' ? 'auto' : this.gridLeft,
          top: this.gridTop === '' ? 'auto' : this.gridTop,
          right: this.gridRight === '' ? 'auto' : this.gridRight,
          bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
          borderWidth: 0,
          containLabel: true
        },
        tooltip: {
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
          // formatter: function(params) {
          //   return params[0].name + '<br/>' +
          //     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          //     params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' 万元<br/>'
          // }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: legenddata
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            },
            formatter: '{value}' + this.yLabel,
            // formatter: function(value) {
            //   if (value >= 10000) {
            //     return (value / 10000).toLocaleString() + '万'
            //   } else {
            //     return value.toLocaleString()
            //   }
            // },
          },
          data: seriesdata
        }],
        series: [{
          name: '数值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: parseInt(this.barRadiusWidth),
              color: vm.multColor ? null : new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: this.colors[0]
              }, {
                offset: 1,
                color: this.colors[1]
              }]),
            },
          },
          barWidth: this.barWidth,
          data: seriesdata
        }, {
          name: '背景',
          type: 'bar',
          barWidth: this.barWidth,
          barGap: '-100%',
          data: maxdata,
          itemStyle: {
            normal: {
              color: this.barBgColor,
              barBorderRadius: parseInt(this.barRadiusWidth)
            }
          },
        }]
      }
    }
  },

  methods: {
    setSeries () {

    }
  },

  watch: {

  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
